<!-- 车辆管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="app-container">
      <el-card
        class="search-card-box"
        shadow="never"
      >
        <el-form
          ref="driverForm"
          :model="params"
          label-width="80px"
        >
          <el-row :gutter="60">
            <el-col :span="8">
              <el-form-item
                label="司机账号:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="params.account"
                  placeholder="请输入司机账号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="司机姓名:"
                style="margin-bottom: 0px"
                label-width="110px"
              >
                <el-input
                  v-model="params.name"
                  placeholder="请输入司机姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="司机手机号:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <el-input
                  v-model="params.mobile"
                  clearable
                  placeholder="请输入司机手机号"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="所属机构:"
                style="margin-bottom: 20px"
                label-width="110px"
              >
                <treeselect
                  v-model="params.agentId"
                  :options="agencyOptions"
                  :normalizer="normalizer"
                  :searchable="true"
                  style="width: 100%"
                  placeholder="请选择当前所在机构"
                  no-options-text="暂无数据"
                  no-results-text="暂无数据"
                  @select="selectCurrentAgency"
                  @open="opensCurrentAgency"
                  @close="closesCurrentAgency"
                />
                <img
                  ref="arrowsCurrentAgency"
                  src="@/assets/pullDown.png"
                  style="position:absolute;width:18px;height:18px;right:9px;top:12px;cursor:pointer;pointer-events:none;transition-duration:0.3s"
                />
              </el-form-item>
            </el-col>

            <el-col
              :span="8"
              style="padding-left:50px"
            >
              <el-button
                type="warning"
                @click="search"
              >搜索</el-button>
              <el-button
                plain
                class="reset-btn"
                @click="reset"
              >重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <el-table
          :data="driverListTtem"
          :model="driverListTtem"
          fit
          style="width: 100%"
          stripe
          :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
        >
          <el-card
            slot="empty"
            class="table-empty-box"
            shadow="never"
          >
            <empty></empty>
          </el-card>
          <el-table-column
            align="left"
            type="index"
            label="序号"
            width="120"
          >

          </el-table-column>
          <el-table-column
            align="left"
            label="司机账号"
            min-width="200"
            prop="account"
          >

          </el-table-column>
          <el-table-column
            align="left"
            label="司机姓名"
            min-width="200"
            prop="name"
          >

          </el-table-column>
          <el-table-column
            align="left"
            label="司机电话"
            min-width="200"
            prop="mobile"
          >

          </el-table-column>

          <el-table-column
            align="left"
            label="关联车辆"
            min-width="200"
            prop="truck.licensePlate"
          >

          </el-table-column>

          <el-table-column
            align="left"
            label="所属机构"
            min-width="200"
            prop="agency.name"
          >
          </el-table-column>

          <el-table-column
            align="left"
            label="工作状态"
            min-width="200"
            prop="workStatus"
          >
          </el-table-column>

          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="150"
            class-name="small-padding fixed-width"
          >
            <template #default="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push(`driver-detail?id=${row.userId}`)"
              >查看</el-link>
              |
              <el-link
                type="primary"
                :underline="false"
                @click="vehicle(row)"
              >配置车辆</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">

            <el-pagination
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="+total"
              @size-change="driverSizeChange"
              @current-change="driverCurrentChange"
            />
          </div>
        </div>
      </el-card>
      <!-- 配置车辆 -->
      <el-dialog
        title="运输配置"
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose"
        class="add-form-dialog"
      >
        <div
          style="width: 100%;height: 80px;background-color: #fbfafa;"
          class="div-headr"
        >
          <div>
            <span>司机编号：{{ rowList.userId }}</span>
            <span style="margin-left: 15px;">司机名称：{{ rowList.name }}</span>
          </div>
          <div>
            <span>司机电话：{{ rowList.mobile }}</span>
            <span style="margin-left: 70px;">所属机构：{{ rowList.agency }}</span>
          </div>
        </div>
        <div>
          <h4>配置车辆：
            <el-select
              v-model="getTruck.truckId"
              style="width: 45%;"
              placeholder="请输入车牌号"
              @change="disposition"
            >
              <el-option
                v-for="item in getTruckList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </h4>
        </div>

        <!-- 车辆操作 -->
        <el-table
          border
          style="width: 100%"
          :data="getTruck"
        >
          <el-table-column
            v-model="getTruck.truckId"
            label="车牌号"
          >
          </el-table-column>
          <el-table-column
            v-model="getTruck.runStatus"
            label="车辆状态"
          >
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            class-name="small-padding fixed-width"
          >
            <template #default="{ row }">
              <el-link
                type="primary"
                :underline="false"
                @click="$router.push(`driver-detail?id=${row.userId}`)"
              >查看</el-link>
              |
              <el-link
                type="primary"
                :underline="false"
                @click="del"
              >删除</el-link>
            </template>
          </el-table-column>
        </el-table>

        <div
          slot="footer"
          class="dialog-footer"
          style="text-align: center"
        >
          <el-button
            class="save-btn"
            @click="verifyDispatch"
          >确认</el-button>
          <el-button
            class="cancel-btn"
            @click="handleClose"
          >取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { driverManageListAPI } from '@/api/driver'
import { getTruckListInDriver } from '@/api/transit'
import { agencyList } from '@/api/institutions'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import Treeselect from '@riophae/vue-treeselect'

export default {
  components: {
    Treeselect
  },
  data() {
    return {
      rowList: [],
      driverListTtem: [],
      // 列表数据
      params: {
        page: 1,
        pageSize: 10,
        account: '',
        agentId: null, // 机构id
        name: '',
        phone: null,
        workStatus: null
      },
      total: '',
      agencyOptions: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      dialogVisible: false,
      getTruckList: [],
      getTruck: [],
      getTruckItem: []
    }
  },
  created() {
    // 渲染列表
    this.driverManage()
    this.getAgencyList()
    this.getTruckListIn()
  },
  methods: {
    async driverManage() {
      const res = await driverManageListAPI(this.params)
      console.log('数据', res.data.items)
      this.driverListTtem = res.data.items
      this.total = res.data.counts
    },
    driverSizeChange(val) {
      // console.log(`${val}`)
      this.params.pageSize = val
      this.driverManage()
    },
    driverCurrentChange(value) {
      this.params.page = value
      this.driverManage()
    },
    // 搜索
    search() {
      this.params.page = 1
      this.driverManage(this.params)
    },
    // 重置
    reset() {
      this.params = {
        page: 1,
        pageSize: 10,
        account: '',
        agentId: null, // 机构id
        name: '',
        phone: null,
        workStatus: null
      }
      this.driverManage()
    },

    // 获取树桩接口信息
    async getAgencyList() {
      const res = await agencyList()
      this.agencyOptions = JSON.parse(res.data)
      console.log(this.agencyOptions)
    },

    // 打开下拉框
    opensCurrentAgency() {
      this.$refs.arrowsCurrentAgency.style.transform = 'rotate(-180deg)'
    },
    // 关闭下拉框
    closesCurrentAgency() {
      this.$refs.arrowsCurrentAgency.style.transform = 'rotate(0deg)'
    },
    selectStartAgency(val) {
      this.params.agentId = val.id
    },
    selectEndAgency(val) {
      this.params.agentId = val.id
    },
    selectCurrentAgency(val) {
      this.params.agentId = val.id
    },
    // 配置车辆
    vehicle(row) {
      this.rowList = row
      this.rowList.agency = row.agency.name
      console.log('这是什么', this.rowList)
      const h = this.$createElement
      this.$msgbox({
        title: '车辆配置',
        message: h('p', null, [
          h('p', null, '配置车辆需满足以下条件：'),
          h('span', '1司机信息已完善'), h('span', '2司机已设置排班'),
          h('p', '3司机绑定车辆未在启用状态')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogVisible = true
      })
    },
    // 配置车辆输入框数据
    async getTruckListIn() {
      const res = await getTruckListInDriver()
      console.log('配置车辆', res)
      const a = res.data.map(item => {
        return {
          name: item.licensePlate,
          id: item.id,
          runStatus: item.runStatus
        }
      })
      console.log(a)
      this.getTruckList = a
      this.getTruckItem = a
    },
    disposition(add) {
      console.log('add', add)
    },
    // 取消按钮
    handleClose() {
      this.dialogVisible = false
    },
    verifyDispatch() { },
    // 删除
    del() {

    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}

.box-card {
  margin: 20px 0px;
}

::v-deep .pagination {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding-bottom: 0px;
}

::v-deep .el-dialog__body {
  padding-left: 50px !important;
}
</style>

<style lang="scss" scoped>
.waybill-list {

  ::v-deep .el-table td,
  ::v-deep .el-table th {
    padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
  }
}

.waybill-list ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}

::v-deep .el-card {
  overflow: initial;
}

::v-deep .el-select {
  width: 100%;
}

.pages {
  text-align: center;
}

.div-headr {
  font-size: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 90px;
  background-color: #fbfafa;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 21px 52px;
  margin: 0 auto;
  margin-top: -10px;
}
</style>

